<template>
  <div class="pk-userinfo"> 
    <pk-dialog :footer="false" @onClose="onClose" @confirm="confirm" :showClose="false">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="pk-userinfo-ruleForm"
        status-icon
        label-position="top"
      >
      <el-form-item prop="avatar" >
        <div class="pk-userinfo-avatar">
          <el-avatar :size="60" :src="circleUrl" v-if="!ruleForm.avatar"/>
          <el-avatar :size="60" :src="ruleForm.avatar" v-if="ruleForm.avatar"/>
          <div class="pk-userinfo-avatareditbox">
            <div class="pk-userinfo-avataredit pointer">
              <el-upload
                  ref="uploadRef"
                  class="upload-demo"
                  action="https://api.bytesbay.cn/bolePin/user/uploadPicture"
                  :auto-upload="true"
                  :show-file-list="false"
                  :file-list="fileList"
                  name="filename"
                  :headers="updataParam"
                  :on-success="onSuccess"
                >
                <template #trigger>
                  <el-icon :size="20" color="#000">
                    <Edit />
                  </el-icon>
                </template> 
              </el-upload>
              </div>
              <div class="pk-userinfo-avatarText pointer" @click="imgMathBtn">随机生成</div> 
          </div>
        </div>
      </el-form-item>
      <el-form-item prop="fullname" label="姓名">
        <el-input v-model="ruleForm.fullname" style="width: 280px" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item prop="email" label="邮箱">
        <el-input v-model="ruleForm.email" style="width: 280px" placeholder="请输入邮箱" />
      </el-form-item>
      
      <el-form-item prop="gender">
        <el-radio-group v-model="ruleForm.gender" >
          <el-radio :value="1" size="large">男</el-radio>
          <el-radio :value="2" size="large">女</el-radio>
        </el-radio-group>
      </el-form-item>  
      <el-form-item>
        <div class="mt-24"><el-button type="primary" size="large" @click="submitForm">确认</el-button></div>
      </el-form-item>
      </el-form>
    </pk-dialog>
  </div>
</template>

<script setup>
import { Edit } from '@element-plus/icons-vue'
import { getVerifyCode, authLogin, updateUserInfo, getRandomAvatar } from '@/api/api'
import { reactive, ref, defineEmits, onMounted, defineProps } from 'vue';
import pkDialog from '@/components/pkui/pkdialog/pkdialog.vue'
import circleUrl from "@/assets/usericon.png"
import { getToken, setKeyItem} from '@/utils/auth'
import { validateEmail } from '@/utils/utils'
const emits = defineEmits(["onClose", "confirm"]) 
const ruleFormRef = ref(null)
const fileList = ref([])
const ruleForm = reactive({
  fullname: ''
})
const updataParam = reactive({
  Token: ""
})

const props = defineProps({
  profile: {
    type: Object,
    default: () => {}
  }
})

const codeText = ref('获取验证码')
const num = ref(60)
const timer = ref(null)

const onClose = () => {
  emits('onClose')
}

const confirm = () => {
  emits('confirm')
}

const validatePass = (rule, value, callback) => { 
  if (!ruleForm.avatar) {
    callback(new Error('请上传头像'))
  } else {
    callback()
  }
}

const validateEmailPass = (rule, value, callback) => { 
  if (!ruleForm.email) {
    callback(new Error('请输入邮箱'))
  } else {
    if (!validateEmail(ruleForm.email)) {
      callback(new Error('邮箱格式不对'))
      return
    }
    callback()
  }
}


const rules = reactive({
  avatar:[
    {validator: validatePass, trigger: 'change' }
  ],
  gender: [
    { required: true, message: '性别没有选择', trigger: 'change' },
  ],
  email: [
    { required: true, validator: validateEmailPass, trigger: 'blur' },
  ],
  fullname: [
    { required: true, message: '姓名没有填写', trigger: 'blur' },
  ],
})

const submitForm = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      updateUserInfo({
        ...ruleForm,
        gender: parseInt(ruleForm.gender) 
      }).then(res => {
        if (res.code === 1000) {
          confirm()
        } 
      })
    } 
  })
}

const imgMathBtn = () => {
  getRandomAvatar().then(res => {
    ruleForm.avatar = res.data
  })
}

const onSuccess = (e) => {
  ruleForm.avatar = e.data
  ruleFormRef.value.validateField("avatar")
  
}

onMounted(() => {
  updataParam.Token = getToken()
  ruleForm.avatar = props.profile.avatar || ''
  ruleForm.fullname = props.profile.fullname || ''
  ruleForm.gender = props.profile.gender || ''
  ruleForm.email = props.profile.email || ''

  if (props.profile.avatar) {
    fileList.value.push({
      url: props.profile.avatar
    })
  }

})

</script>

<style lang="scss" scoped>
.pk-userinfo{
  &-ruleForm{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    justify-content: center;
    margin: 0 auto;
  }
  &-avatar{
    position: relative;
  }
  &-avatareditbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    left: 40px;
    bottom: 0;
    right: 0;
    cursor: pointer;
    width: 200px;
  }
  &-avataredit {
    height: 20px;
    margin-right: 12px;
  }
}

@media screen and (max-width: 500px) {
  ::v-deep .el-dialog {
    width: 90%!important;
  }
}
</style>